<template>
    <div class="chat-input" :class="{ focus: status.isFocus, 'hide-placeholder': !!questionContent }" :data-placeholder="placeholderTips">
        <div class="content-input" @keyup.enter="doEnterKeyDown" @input="doInputQuestion" @focus="status.isFocus=true" @blur="status.isFocus=false" ref="questionContentInputEl" contenteditable="true"></div>
        <div class="chat-input-btns">
            <div>
                <!-- <span @click="doChangeStatus('isDeepThinking')" :class="{ active: status.isDeepThinking }"><i class="iconfont">&#xe876;</i><span>深度思考</span></span>
                <span @click="doChangeStatus('isWebbasedSearch')" :class="{ active: status.isWebbasedSearch }"><i class="iconfont">&#xe7f7;</i><span>联网搜索</span></span> -->
                <span @click="doStartNewTopic()"><i class="iconfont">&#xe81c;</i><span>新话题</span></span>
                <span @click="doShowTopicList()" class="topic-list-btn"><span>话题历史</span></span>
            </div>
            <button :class="{ active: questionContent }" @click="doSend()"><i class="iconfont">&#xe641;</i></button>
        </div>
    </div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
    setup (props, { emit }) {
        const placeholderTips = ref('在此输入问题，通过shift+enter键换行')
        const status = reactive({
            isFocus: false,
            isDeepThinking: false,
            isWebbasedSearch: false
        })

        const questionContentInputEl = ref(null)
        const questionContent = ref(null)

        const doInputQuestion = () => {
            questionContent.value = questionContentInputEl.value.innerText
            if (questionContent.value == '\n') {
                questionContent.value = ''
            }
        }

        const doChangeStatus = (key) => {
            status[key] = !status[key]
        }

        const doSend = () => {
            if (!questionContent.value) { return }
            // console.log('doSend....', questionContent.value)
            emit('send', questionContent.value)
        }

        const doClearQuestion = () => {
            questionContentInputEl.value.innerText = ''
            questionContent.value = ''
        }

        const doEnterKeyDown = (e) => {
            if (e.shiftKey) { return }
            e.preventDefault()
            doSend()
        }

        const doStartNewTopic = () => {
            emit('newtopic')
        }

        const doShowTopicList = () => {
            document.querySelector('.history-list')?.classList.add('show')
        }

        return {
            status,
            questionContent,
            questionContentInputEl,
            placeholderTips,
            doChangeStatus,
            doSend,
            doInputQuestion,
            doEnterKeyDown,
            doClearQuestion,
            doStartNewTopic,
            doShowTopicList
        }
    }
}
</script>

<style lang="scss">
    @use './style.scss';
</style>
